<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="mian" style="width:100%;height:800px"></div>
</body>

</html>
<script>
    let mian = document.querySelector('#mian')
    let obj = echarts.init(mian)
    let option = {
        xAxis: [
            {
                type: 'category',
                data: ['2012', '2013', '2014', '2015', '2016', '2017']
            },
            {
                axisLine: { show: true }
            }
        ],
        yAxis: [
            { type: 'value' },

        ],
            // 区域缩放
            dataZoom:[
            {
                type:'slider',
                xAxisIndex:0,
                fliterMode:'none'
            },
            {
                type:'slider',
                yAxisIndex:0,
                fliterMode:'none'
            },
        ],
        series: [
            {
                type: 'line',
                data: ['25', '70', '80', '88', '68', '82'],
                smooth: true,
                // 区域填充
                areaStyle:{},
                markPoint: {
                    data: [
                        {
                            type: "max",
                            name: 'Max'
                        },
                        {
                            type: "min",
                            name: 'Min'
                        },
                    ]
                },
                markLine:{ 
                    data:[
                        {
                            type:'average',
                            name:'Avg'
                        }
                    ]
                }
            }

        ],
    
    }
    obj.setOption(option)
</script>